<template>
  <el-card class="main-card">
    <div class="title">{{ this.$route.meta.menuName }}</div>
    <!-- 表格操作 -->
    <div class="operation-container" style="margin-top: 24px">
      <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="openModel(null)"
      >
        新增
      </el-button>
      <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          :disabled="this.categoryIdList.length == 0"
          @click="isDelete = true"
      >
        批量删除
      </el-button>
      <div style="margin-left:auto;margin-top: 3px">
        <el-input
            v-model="keywords"
            prefix-icon="el-icon-search"
            size="small"
            placeholder="请输入活动内容"
            style="width:200px"
            @keyup.enter.native="searchCategories"
        />
        <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            style="margin-left:1rem"
            @click="searchCategories"
        >
          搜索
        </el-button>
      </div>
    </div>
    <!-- 表格展示 -->
    <el-table
        border
        :data="categoryList"
        @selection-change="selectionChange"
        v-loading="loading"
    >
      <!-- 表格列 -->
      <el-table-column type="selection" width="55" />
      <!-- 分类名 -->
      <el-table-column prop="content" label="活动内容" align="center" />
      <el-table-column prop="status" label="禁用" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#F4F4F5"
              :active-value=true
              :inactive-value=false
              @change="changeDisable(scope.row)"
          />
        </template>
      </el-table-column>
      <!-- 分类创建时间 -->
      <el-table-column prop="createTime" label="创建时间" align="center">
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right:5px" />

          {{parseTime(scope.row.createTime,"{y}-{m}-{d}") }}
        </template>
      </el-table-column>
      <!-- 列操作 -->
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openModel(scope.row)">
            编辑
          </el-button>
          <el-popconfirm
              title="确定删除吗？"
              style="margin-left:1rem"
              @confirm="deleteCategory(scope.row.id)"
          >
            <el-button size="mini" type="danger" slot="reference">
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        class="pagination-container"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="current"
        :page-size="size"
        :total="count"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
    />
    <!-- 批量删除对话框 -->
    <el-dialog :visible.sync="isDelete" width="30%">
      <div class="dialog-title-container" slot="title">
        <i class="el-icon-warning" style="color:#ff9900" />提示
      </div>
      <div style="font-size:1rem">是否删除选中项？</div>
      <div slot="footer">
        <el-button @click="isDelete = false">取 消</el-button>
        <el-button type="primary" @click="deleteCategory(null)">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 添加编辑对话框 -->
    <el-dialog :visible.sync="addOrEdit" width="30%">
      <div class="dialog-title-container" slot="title" ref="categoryTitle" />
      <el-form label-width="80px" size="medium" :model="categoryForm">
        <el-form-item label="分类名">
          <el-input v-model="categoryForm.content" style="width:220px" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addOrEdit = false">取 消</el-button>
        <el-button type="primary" @click="addOrEditCategory">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>

import {parseTime} from "@/utils/data";

const {saveOrUpdateActive, getActivePage, deleteActiveList, typeIsDisable} = require("@/api/active");
export default {
  name:"MyType",
  created() {
    this.listCategories();
  },
  data: function() {
    return {
      isDelete: false,
      loading: true,
      addOrEdit: false,
      keywords: null,
      categoryIdList: [],
      categoryList: [],
      categoryForm: {
        content:"",
      },
      current: 1,
      size: 10,
      count: 0
    };
  },
  methods: {
    parseTime(item,t){
     return parseTime(item,t);
    },
    selectionChange(categoryList) {
      this.categoryIdList = [];
      categoryList.forEach(item => {
        this.categoryIdList.push(item.id);
      });
    },
    async changeDisable(menu) {
      //开启了
      if(menu.status==false){
        for (const item of this.categoryList) {
          //如果有人启用，那么禁用掉他
          if(item.id!=menu.id&&item.status!=null&&item.status==false){
             typeIsDisable({
              id: item.id,
              isDisable: true
            }).then(res=>{item.status=true})
          }
        }
      }
      const res = await typeIsDisable({
        id: menu.id,
        isDisable: menu.status
      })
      this.$forceUpdate();
      this.$message.success(res.msg);
    },
    searchCategories() {
      this.current = 1;
      this.listCategories();
    },
    sizeChange(size) {
      this.size = size;
      alert(size);
      this.listCategories();
    },
    currentChange(current) {
      this.current = current;
      this.listCategories();
    },
    async deleteCategory(id) {
      let param = [];
      if (id == null) {
        param = this.categoryIdList;
      } else {
        param = [id]
      }
      const res = await deleteActiveList(param);

      if (res.code) {
        this.$notify.success({
          title: "成功",
          message: res.msg
        });
        await this.listCategories();
      } else {
        this.$notify.error({
          title: "失败",
          message: res.msg
        });
      }
      this.isDelete = false;

    },
    async listCategories() {
      const param = {
        currentPage: this.current,
        pageSize: this.size,
        queryString: this.keywords
      };
      const res = await getActivePage(param);
      this.categoryList = res.data.records;
      this.count = res.data.total;
      this.loading = false;
    },
    openModel(category) {
      if (category != null) {
        this.categoryForm = JSON.parse(JSON.stringify(category));
        this.$refs.categoryTitle.innerHTML = "修改活动";
      } else {
        this.categoryForm.id = null;
        this.categoryForm.content = "";
        this.$refs.categoryTitle.innerHTML = "添加活动";
      }
      this.addOrEdit = true;
    },
    async addOrEditCategory() {
      if (this.categoryForm.content.trim() == "") {
        this.$message.error("内容不能为空");
        return false;
      }
      const res = await saveOrUpdateActive(this.categoryForm);
      if (res.code) {
        this.$notify.success({
          title: "成功",
          message: res.msg
        });
        await this.listCategories();
      } else {
        this.$notify.error({
          title: "失败",
          message: res.msg
        });
      }
      this.addOrEdit = false;
    }
  }
};
</script>
